<template>
  <van-tabbar v-model="active" inactive-color="#000000" active-color="#DD4634" style="box-shadow: 4px 8px 10px 15px rgba(0, 0, 0, 0.1);">
    <van-tabbar-item
      v-for="(item, index) in tabbars"
      :key="index"
      :to="item.name"
      :info="index == 3 ? (num == '' ? '' : num) : ''"
    >
      <span v-if="index != 2">{{ item.title }}</span>
      <img
        v-if="index != 2"
        slot="icon"
        slot-scope="props"
        :src="props.active ? item.active : item.normal"
      />
      <div v-if="index == 2" style="text-align: center">
        <img
          class="tui"
          src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/petroleum.png"
          alt=""
        />
        <div class="shiyou">{{ item.title }}</div>
      </div>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import Vue from "vue";

import { Tabbar, TabbarItem } from "vant";
Vue.use(Tabbar).use(TabbarItem);

export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      num: this.$store.state.unReadCound,
      tabbars: [
        {
          name: "index",
          title: "首页",
          normal:
            "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/home.png",
          active:
            "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/home-active.png",
        },
        {
          name: "shopList",
          title: "所有产品",
          normal:
            "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/classification.png",
          active:
            "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/classification-active.png",
        },
        {
          name: "oilShow",
          title: "石油专场",
          normal:
            "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/petroleum.png",
          active:
            "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/petroleum.png",
        },
        {
          name: "map",
          title: "附近油站",
          normal:
            "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/gasStation.png",
          active:
            "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/gasStation-active.png",
        },
        {
          name: "my",
          title: "个人中心",
          normal:
            "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/my.png",
          active:
            "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/icon/my-active.png",
        },
      ],
    };
  },
  watch: {
    getunReadCound(val) {
      if (val == 0) {
        this.num = "";
      } else {
        this.num = val;
      }
    },
  },
  computed: {
    getunReadCound() {
      return this.$store.state.unReadCound;
    },
  },
  methods: {
    toJSON(){
      return this
    }
  },
  //通过路由跳转判断选中的样式
  created() {
    if (this.$route.name == "index") {
      this.active = 0;
    } else if (this.$route.name == "shopList") {
      this.active = 1;
    } else if (this.$route.name == "oilShow") {
      this.active = 2;
    } else if (this.$route.name == "map") {
      this.active = 3;
    } else if (this.$route.name == "my") {
      this.active = 4;
    }
  },
  watch: {
    $route(to) {
      if (to.name == 'index') {
        this.active = 0
      }
      if (to.name == 'shopList') {
        this.active = 1
      }
      if (to.name == 'oilShow') {
        this.active = 2
      }
      if (to.name == 'map') {
        this.active = 3
      }
      if (to.name == 'my') {
        this.active = 4
      }
    },
  },
};
</script>

<style  scoped>
.tui {
  width: 80px;
  height: 80px;
  margin-top: -1rem;
  z-index: 100000;
}
[class*="van-hairline"]::after {
  border: none !important;
}
.shiyou {
  position: relative;
  top: -0.15rem;
  text-align: center;
  /* margin-top: -.6rem; */
}
.van-tabbar,
.van-tabbar-item {
  height: 2rem;
}
.van-tabbar-item {
  font-size: 14px;
}
.van-tabbar-item__icon img {
  height: 30px;
}
</style>